<template>
  <div class="SharePopup">
    <div class="popup" @click="hides($event,2)">
      <div class="content" @click="stopPropagation">
        <i class="iconfont icon-guanbi" @click="hides"></i>
        <div class="title">
          温馨提示
        </div>
        <div class="ctn">
          {{text}}
        </div>
        <div class="btns">
          <btn :obj="btnstyle" :text="btntext" v-on:statr="carry"></btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import btn from '../btn/index'

  export default {
    name: 'index',
    data: function () {
      return {
        btnstyle: {
          opacity: 1,
          width: '80%',
          boxShadow: '0 10px 24px 0 rgba(46, 185, 255, 0.4)'
        },
        btntext: '立即补阅读',
      }
    },
    props: ['text'],
    mounted: function () {
    },
    methods: {
      carry: function () {
        this.$emit('statr')
      },
      hides: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        this.$emit('hide')
      },
      stopPropagation: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        return false
      }
    },
    components: {btn}
  }
</script>

<style scoped>
  @import "../../assets/css/components/SharePopup/index.css";

  .SharePopup .ctn {
    padding: 2.5rem 3rem;
    line-height: 2.4rem;
  }

  .SharePopup .btns {
    margin-bottom: 3rem;
  }
</style>
